<script setup>
defineProps({
  src: String,
  name: String,
})
</script>

<template>
  <div class="image-card">
    <el-image class="image" :src="src" :alt="name" fit="fill" />
    <div class="desc">
      <i class="icon"></i><span class="name">{{ name }}</span>
    </div>
  </div>
</template>

<style scoped lang="scss">
.image-card {
  position: relative;
  margin-right: 13px;
  margin-bottom: 12px;

  .image {
    width: 100%;
    height: 100%;
  }

  .desc {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 23px;
    background: rgba(0, 29, 49, 0.8);
    color: #ffffff;
    display: flex;
    align-items: center;
    font-size: 12px;

    .icon {
      width: 7px;
      height: 7px;
      background: #21df95;
      border-radius: 50%;
      margin-left: 9px;
      margin-right: 6px;
    }
  }
}
</style>
